<template>
  <div class="alarmConfiguration zy-content">
    <!-- 搜索 -->
    <search :columns="searchData" @getSearch="getSearch(arguments)"></search>
    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t('common.listInformation') }}</span>
        <!-- <Button @click="exportTemplateClick">{{ $t('common.batchExport') }}</Button>
                <Button @click="getTableColumns(columns)">
                    {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
        </Button>-->
      </div>
      <!-- 表格 -->
      <div class="tableContent">
        <Table
          class="resizable-table"
          border
          @on-column-width-resize="onColumnWidthResize"
          :columns="columnsList"
          ellipsis
          ref="selection"
          stripe
          :data="dataArr"
          @on-selection-change="onSelectChange"
        >
          <template slot-scope="{ row }" slot="action">
            <span class="operationBtn" @click="createfaultCodeShowH(row)">
              <i class="iconfont zy-common-bianji"></i>
              {{ $t('common.Edit') }}
            </span>
            <span class="operationBtn" @click="delPrrShowH(row)">
              <i class="iconfont zy-common-shanchu"></i>
              {{
              $t('common.Delete') }}
            </span>
          </template>

          <template slot-scope="{ row }" slot="clearLineTotal">
            <span class="row_click" @click="showRowDetail(row)">
              {{
              row.clearLineTotal
              }}
            </span>
          </template>
        </Table>
      </div>
      <!-- 分页 -->
      <div class="pageWrap mt16">
        <pageLeftTitle :total="total" :selected="delIds.length" />
        <Page
          :total="total"
          :page-size="pageSize"
          :page-size-opts="pageSizeOption"
          :current="pageNum"
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
          show-sizer
          show-total
        />
      </div>
    </div>
    <Modal
      :mask-closable="false"
      v-model="showDetailDialog"
      title="检查项目"
      class="modal-content-layout"
      width="55%"
    >
      <div class="alarmConfiguration">
        <div class="list-layout2">
          <div class="tableContent mt14">
            <Table
              class="resizable-table"
              border
              @on-column-width-resize="onColumnWidthResize"
              :columns="columns2"
              ellipsis
              ref="selection"
              stripe
              :data="dataArr2"
              @on-selection-change="onSelectChange2"
            >
              <!-- <Badge :count="order.uploadAttachments ? order.uploadAttachments.length : 0">
                <div class="preview-img">
                  <div
                    class="itemCol"
                    v-for="(item, index) in order.uploadAttachments"
                    @click="previewClicjk(item, index, order.uploadAttachments)"
                    :key="index"
                  >
                    <span class="item">
                      <template v-if="!item.filePath.includes('video')">
                        <img :src="util.filePathToUrl(item.filePath)" alt />
                      </template>
                      <template>
                        <video preload="auto" loop autoplay muted>
                          <source :src="util.filePathToUrl(item.filePath)" type="video/mp4" />
                        </video>
                      </template>
                    </span>
                  </div>
                </div>
              </Badge>-->
            </Table>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import search from "@/components/curd/searchList.vue";
import fileDownload from "js-file-download";
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
  name: "clearLine",
  components: { search },
  mixins: [toggleTableOperation],
  data() {
    return {
      wareHouseList: [],
      showDetailDialog: false,
      importExcelState: false /*批量导入*/,
      formItem: {},
      addtitle: "",
      allCheck: false,
      loading: false,
      create: false,
      searchParams: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      delIds: [],

      searchData: [
        {
          title: "工序",
          key: "productionProcessesName"
        },
        {
          title: "功能位置",
          key: "functionalLocation",
          type: "cascader",
          dicUrl: "/basic/organization/findListByToken?level=0",
          params: {
            label: "name",
            value: "code",
            children: "children"
          }
        }
        // {
        //   title: "设备编号",
        //   key: "deviceCode"
        // },
        // {
        //   title: "物料编号",
        //   key: "moldCode"
        // }
      ],
      columns: [
        {
          key: "selection",
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "工单号",
          key: "workCode",
          minWidth: 130,
          align: "center",
          resizable: true
        },
        {
          title: "位置",
          key: "functionalLocationName",
          minWidth: 130,
          align: "center",
          resizable: true
        },
        {
          title: "工序",
          key: "productionProcessesName",
          minWidth: 130,
          align: "center",
          resizable: true
        },
        {
          title: "设备编号",
          key: "deviceCode",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "模具编号",
          key: "moldCode",
          minWidth: 130,
          align: "center",
          resizable: true
        },
        {
          title: "更换前产品编号",
          key: "productNumberAfter",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "更换前产品名称",
          key: "productNameBefore",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "更换前产品规格",
          key: "productSpecificationsBefore",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "更换后产品编号",
          key: "productNumberAfter",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "更换后产品名称",
          key: "productNameAfter",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "更换后产品规格",
          key: "productSpecificationsAfter",
          minWidth: 150,
          align: "center",
          resizable: true
        },
        {
          title: "检查项目",
          key: "clearLineTotal",
          minWidth: 180,
          align: "center",
          slot: "clearLineTotal",
          resizable: true,
          tooltip: true
        },
        {
          title: "操作人",
          key: "operater",
          minWidth: 180,
          align: "center",
          resizable: true
        },
        {
          title: "操作时间",
          key: "createTime",
          minWidth: 180,
          align: "center",
          resizable: true
        }
        // {
        //     //title: '操作',
        //     title: `${this.$t('common.operation')}`,
        //     slot: "action",
        //     fixed: 'right',
        //     minWidth: 160,
        //     align: "center"
        // }
      ],
      columns2: [
        {
          title: "检查项目",
          key: "checkProject",
          width: 200,
          align: "center"
        },
        {
          title: "检查内容",
          key: "checkContent",
          minWidth: 200,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "图片",
          key: "imp",
          minWidth: 200,
          align: "center",
          resizable: true,
          tooltip: true
        }
      ],
      dataArr: [],
      dataArr2: [],
      delFaultCodeShowF: false, //是否显示删除弹窗
      pageSizeOption: [10, 20, 30, 40],
      createByOptions: []
    };
  },
  mounted() {
    this.getTableColumnsWidth(this.columns);
    this.searchList();
  },
  methods: {
    showRowDetail(row) {
      this.dataArr2 = row.clearLineConfigList;
      this.showDetailDialog = true;
    },
    getSearch(arg) {
      this.searchParams = JSON.parse(JSON.stringify(arg[0]));
      const { functionalLocation } = this.searchParams;
      if (functionalLocation && functionalLocation.length !== 0) {
        this.searchParams.functionalLocation = [functionalLocation.at(-1)];
      }
      this.pageNum = 1;
      this.searchList();
    },
    reset() {
      this.searchParams = {};
      this.changeNum();
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },

    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    //查询列表
    searchList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchParams
      };
      this.axios({
        method: "post",
        // url: '/dms/warehouseDetails/getWarehouseDetailsList',
        url: "dms/clearLineDetail/queryClearLineDetailList",
        data: params
      }).then(res => {
        if (res.code === 200) {
          this.dataArr = res.data.records;
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true
          });
        }
      });
    },
    //勾选列表
    onSelectChange(selection) {
      let myArray = [];
      selection.map((item, index) => {
        myArray.push(item.id);
      });
      this.delIds = myArray;
      if (selection.length > 0) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
    //导出
    exportTemplateClick() {
      let params = {
        delIds: this.delIds
      };
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key]);
        }
      }
      const filName = "返工执行记录";
      this.axios({
        url: "",
        method: "post",
        data: params,
        responseType: "blob"
      }).then(res => {
        fileDownload(res, filName + ".xlsx");
      });
    }
  }
};
</script>

<style scoped lang="scss">
.ivu-input-number {
  width: -webkit-fill-available;
}

.row_click {
  cursor: pointer;
  color: rgb(50, 113, 240) !important;
}
</style>

